<template>
  <view class="user-info-container">
    <view class="header">
      <text class="title">个人信息</text>
    </view>
    
    <view class="info-card">
      <!-- 用户头像 -->
      <view class="avatar-section">
        <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
      </view>
      
      <!-- 用户信息列表 -->
      <view class="info-list">
        <view class="info-item">
          <text class="label">用户ID</text>
          <text class="value">{{ userData.u_id || '--' }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">用户名</text>
          <text class="value">{{ userData.username || '未设置' }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">性别</text>
          <text class="value">{{ userData.sex || '未知' }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">邮箱</text>
          <text class="value">{{ userData.email || '未设置' }}</text>
        </view>
        
        <view class="info-item bio-item">
          <text class="label">个人简介</text>
          <text class="value">{{ userData.bio || '这个人很懒，什么都没留下~' }}</text>
        </view>
      </view>
      
      <!-- 编辑按钮 -->
      <view class="action-section">
        <button class="edit-btn" @click="editUserInfo">编辑信息</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 用户数据
const userData = ref({
  u_id: '',
  username: '',
  sex: '',
  email: '',
  bio: ''
})

// 默认头像
const avatarUrl = ref('/static/default-avatar.png')

// 加载用户数据
const loadUserData = async () => {
  try {
    uni.showLoading({
      title: '加载中...'
    })
    
    // 从临时存储获取用户ID
    const userInfo = uni.getStorageSync('userInfo')
    if (!userInfo || !userInfo.U_Id) {
      uni.showToast({
        title: '用户信息获取失败',
        icon: 'error'
      })
      return
    }
    
    console.log('获取到的用户ID:', userInfo.U_Id)
    
    // 使用Promise正确处理uni.request
    const response = await new Promise((resolve, reject) => {
      uni.request({
        url: 'http://192.168.153.1:8080/users/selectByUserId',
        method: 'POST',
        data: {
          userId: userInfo.U_Id
        },
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          console.log('API响应:', res)
          resolve(res)
        },
        fail: (err) => {
          console.error('API请求失败:', err)
          reject(err)
        }
      })
    })
    
    uni.hideLoading()
    
    if (response.statusCode === 200) {
      if (response.data && response.data.code === 200200 && response.data.success) {
        // 根据响应数据结构调整
        const userDataFromAPI = response.data.data?.users || response.data.data
        
        console.log('用户数据:', userDataFromAPI)
        
        // 映射数据字段
        userData.value = {
          u_id: userDataFromAPI.U_Id || userDataFromAPI.u_id,
          username: userDataFromAPI.username || userDataFromAPI.Username,
          sex: userDataFromAPI.sex || userDataFromAPI.Sex,
          email: userDataFromAPI.email || userDataFromAPI.Email,
          bio: userDataFromAPI.bio || userDataFromAPI.Bio || ''
        }
        
        // 如果有头像URL，更新头像
        if (userDataFromAPI.avatar || userDataFromAPI.Avatar) {
          avatarUrl.value = userDataFromAPI.avatar || userDataFromAPI.Avatar
        }
        
        console.log('处理后的用户数据:', userData.value)
      } else {
        throw new Error(response.data?.message || '获取用户信息失败')
      }
    } else {
      throw new Error(`HTTP ${response.statusCode}`)
    }
  } catch (error) {
    uni.hideLoading()
    console.error('加载用户数据失败:', error)
    uni.showToast({
      title: '加载用户数据失败: ' + (error.message || '网络错误'),
      icon: 'none'
    })
  }
}

// 编辑用户信息
const editUserInfo = () => {
  uni.navigateTo({
    url: '/pages/edit-user/edit-user'
  })
}

onMounted(() => {
  loadUserData()
})
</script>

<style lang="scss">
.user-info-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .header {
    margin-bottom: 30rpx;
    padding: 20rpx 0;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .info-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  }
  
  .avatar-section {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;
    
    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 2rpx solid #eee;
      background-color: #f0f0f0;
    }
  }
  
  .info-list {
    margin-bottom: 40rpx;
    
    .info-item {
      display: flex;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      .label {
        width: 160rpx;
        font-size: 28rpx;
        color: #666;
        flex-shrink: 0;
      }
      
      .value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
        word-break: break-all;
      }
    }
    
    .bio-item {
      flex-direction: column;
      
      .label {
        width: auto;
        margin-bottom: 15rpx;
      }
      
      .value {
        margin-top: 0;
        line-height: 1.6;
        color: #666;
        font-style: italic;
      }
    }
    
    .info-item:last-child {
      border-bottom: none;
    }
  }
  
  .action-section {
    display: flex;
    justify-content: center;
    
    .edit-btn {
      width: 200rpx;
      height: 80rpx;
      background-color: #3a7afe;
      color: #fff;
      border: none;
      border-radius: 40rpx;
      font-size: 28rpx;
      font-weight: bold;
      
      &:active {
        background-color: #2c5fd6;
      }
    }
  }
}

/* 加载状态样式 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  
  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 错误状态样式 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 40rpx;
  
  .error-icon {
    font-size: 80rpx;
    color: #ccc;
    margin-bottom: 20rpx;
  }
  
  .error-text {
    font-size: 28rpx;
    color: #999;
    text-align: center;
  }
  
  .retry-btn {
    margin-top: 40rpx;
    width: 200rpx;
    height: 70rpx;
    background-color: #3a7afe;
    color: #fff;
    border: none;
    border-radius: 35rpx;
    font-size: 26rpx;
  }
}
</style>